<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
      <p>2. 获取组件对象 - 可调用组件内一切</p>
      <Demo ref="de"></Demo>
      <h1>3.$nextTick的使用</h1>
      <p ref="cutP">{{msg}}</p>
      <button @click="changeMsg">点我改P的数据</button>
  </div>
</template>

<script>

import Demo from './components/demo.vue'
export default {
    data(){
      return{
        msg:'我是可爱的P'
      }
    },
    mounted(){
     
    },
    components: {
        Demo
    },
    methods: {
      changeMsg(){
        this.msg='我变丑了'
        // console.log(this.msg);
        console.log(this.$refs.cutP.innerHTML);
        // this.msg='我变丑了'当msg修改后，Vue内部监测到数据变化，要进行DOM重新渲染
        // data中数据修改是同步的，DOM更新是异步的
        // $nextTick内部采用的是微任务
        // 参数：回调函数
        this.$nextTick(()=>{
          console.log('$nextTick:',this.$refs.cutP.innerHTML);
        })

      }
    }
}
</script>